<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体检信息录入</title>
		<!-- 导入vue框架 -->
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<!-- 导入ElementPlus框架 -->
		<script src="js/element-plus.js"></script>
		<!-- 导入Elementplus Icon  -->
		<script src="js/element-icons.js"></script>
		<!-- 导入Elementplus Css样式 -->
		<link rel="stylesheet" href="css/element-plus.css">
		<!-- 引入主页面样式 -->
		<link rel="stylesheet" href="css/main.css">
		<style>
			.myinput {
				width: 300px;
				height: 22px;
				margin-right: 20px;
			}
		</style>
	</head>
	<body scroll="no">
		<div id="app">
			<!-- 面包屑 -->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>体检信息录入</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- 根据编号查询患者 -->
			<div style="margin-top: 20px;">
				<el-descriptions class="margin-top" title="体检信息查询" :column="3" :size="size" border>
					<template #extra>
						<el-button type="primary">查询</el-button>
					</template>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								订单编号
							</div>
						</template>
						<el-input v-model="id" placeholder="输入体检编号" />
					</el-descriptions-item>
				</el-descriptions>
			</div>
			<!-- 患者基础信息 -->
			<div style="margin-top: 20px;">
				<el-descriptions class="margin-top" title="客户基本信息" :column="3" :size="size" border>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								订单编号
							</div>
						</template>
						202310253212565
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								手机号码
							</div>
						</template>
						213100000000
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								姓名
							</div>
						</template>
						张一山
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								性别
							</div>
						</template>
						女
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								套餐类型
							</div>
						</template>
						23东软家属已婚女士套餐D
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								体检日期
							</div>
						</template>
						2023-10-12
					</el-descriptions-item>
				</el-descriptions>
			</div>
			<!-- 套餐检查 -->
			<div class="demo-collapse" style="margin-top: 20px;">
				<h4>检查录入</h4>
				<el-collapse v-model="activeNames" @change="handleChange">
					<!-- 一般检查基础项目 -->
					<el-collapse-item title="一般检查基础项目" name="1" style="font-weight: bold;">
						<div>
							<el-descriptions class="margin-top" :column="2" :size="size" border>
								<el-descriptions-item label="身高">
									<input class="myinput" type="text" v-model="height" placeholder="请输入身高" />cm
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="体重">
									<input class="myinput" type="text" v-model="height" placeholder="请输入体重" />kg
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="体重指数">
									<el-text class="mx-1" type="warning">22.9</el-text>
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
									<el-button type="danger" size="small" style="margin-left: 20px;">异</el-button>
								</el-descriptions-item>
								<el-descriptions-item label="脉搏">
									<input class="myinput" type="text" v-model="height" placeholder="请输入脉搏" />次/分钟
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="收缩压" label-visible="false">
									<input class="myinput" type="text" v-model="height" placeholder="请输入收缩压" />
									<el-tag size="small">正常值范围：-</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="舒张压">
									<input class="myinput" type="text" v-model="height" placeholder="请输入舒张压" />
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
								</el-descriptions-item>
							</el-descriptions>
							<!-- 科室小结 -->
							<div style="margin-top: 20px;">
								<font>科室小结</font>
								<el-descriptions class="margin-top" :column="1" :size="size" border
									style="margin-top: 20px;">
									<el-descriptions-item label="科室小结">
										<el-input v-model="textarea2" :autosize="{ minRows: 2, maxRows: 4 }"
											type="textarea" placeholder="科室小结：超重" />
									</el-descriptions-item>
								</el-descriptions>
							</div>
							<!-- 责任医生 -->
							<div style="margin-top: 20px;">
								<font>责任医生</font>
								<el-descriptions class="margin-top" :column="3" :size="size" border
									style="margin-top: 20px;">
									<el-descriptions-item label="录入医师">
										<input class="myinput" type="text" v-model="height" placeholder="请输入身高" />
									</el-descriptions-item>
									<el-descriptions-item label="责任医师">
										<input class="myinput" type="text" v-model="height" placeholder="请输入体重" />
									</el-descriptions-item>
									<el-descriptions-item>
										<el-button type="primary" @click="onSubmit">一般检查基础项数据保存</el-button>
									</el-descriptions-item>
								</el-descriptions>
							</div>

						</div>
					</el-collapse-item>
					<!-- 视力+辨色力 -->
					<el-collapse-item title="视力+辨色力" name="2">
						<div>
							<el-descriptions class="margin-top" :column="2" :size="size" border>
								<el-descriptions-item label="色觉检查">
									<el-select v-model="sejue.value" class="m-2" placeholder="输入正确数据">
										<el-option v-for="item in sejue" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-descriptions-item>
								<el-descriptions-item></el-descriptions-item>
								<el-descriptions-item label="右眼裸眼视力">
									<input class="myinput" type="text" v-model="height" placeholder="请输入右眼裸视力" />
									<el-tag size="small" style="margin-left: 20px;">正常值范围：5.0-5.2</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="左眼裸眼视力">
									<input class="myinput" type="text" v-model="height" placeholder="请输入左眼裸视力" />
									<el-tag size="small" style="margin-left: 20px;">正常值范围：5.0-5.2</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="右眼矫正视力">
									<input class="myinput" type="text" v-model="height" placeholder="请输入矫正视力" />
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-0</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="左眼矫正视力" label-visible="false">
									<input class="myinput" type="text" v-model="height" placeholder="请输入矫正视力" />
									<el-tag size="small" style="margin-left: 20px;">正常值范围：-0</el-tag>
								</el-descriptions-item>
							</el-descriptions>
							<!-- 科室小结 -->
							<div style="margin-top: 20px;">
								<font>科室小结</font>
								<el-descriptions class="margin-top" :column="1" :size="size" border
									style="margin-top: 20px;">
									<el-descriptions-item label="科室小结">
										<el-input v-model="textarea2" :autosize="{ minRows: 2, maxRows: 4 }"
											type="textarea" placeholder="科室小结：双眼屈光不正" />
									</el-descriptions-item>
								</el-descriptions>
							</div>
							<!-- 责任医生 -->
							<div style="margin-top: 20px;">
								<font>责任医生</font>
								<el-descriptions class="margin-top" :column="3" :size="size" border
									style="margin-top: 20px;">
									<el-descriptions-item label="录入医师">
										<input class="myinput" type="text" v-model="height" placeholder="请输入录入医师姓名" />
									</el-descriptions-item>
									<el-descriptions-item label="责任医师">
										<input class="myinput" type="text" v-model="height" placeholder="请输入责任医师姓名" />
									</el-descriptions-item>
									<el-descriptions-item>
										<el-button type="primary" @click="onSubmit">视力+辨色力数据保存</el-button>
									</el-descriptions-item>
								</el-descriptions>
							</div>

						</div>
					</el-collapse-item>
					<el-collapse-item title="血常规24项" name="3">
						<div>
							血常规24项具体录入页面
						</div>
					</el-collapse-item>
					<el-collapse-item title="肝功四项" name="4">
						<div>
							肝功四项录入页面
						</div>
					</el-collapse-item>
					<el-collapse-item title="肾功能三项" name="4">
						<div>
							肾功能三项录入页面
						</div>
					</el-collapse-item>
					<el-collapse-item title="血脂四项" name="4">
						<div>
							血脂四项录入页面
						</div>
					</el-collapse-item>
					<el-collapse-item title="尿常规24项" name="5">
						<div>
							尿常规24项录入页面
						</div>
					</el-collapse-item>
					<el-collapse-item title="颈动脉彩超" name="6">
						<div>
							颈动脉彩超录入页面
						</div>
					</el-collapse-item>
					<el-collapse-item title="头部CT" name="7">
						<div>
							头部CT录入页面
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>

	</body>
	<script>
		const App = {
			data() {
				return {
					id: '', //体检编号
					//一般检查基础项目
					height: '',
					//色局检查
					sejue: [{
							value: '正常',
							lable: 'OK',
						},
						{
							value: '红绿色盲',
							lable: 'honglv',
						},
						{
							value: '色弱',
							lable: 'seruo',
						},

					]
				}
			},
			methods: {}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);

		// app.component("phone", ElementPlusIconsVue.Phone);
		// app.component("document", ElementPlusIconsVue.Document);
		// app.component("Service", ElementPlusIconsVue.Service);
		// app.component("Location", ElementPlusIconsVue.Location);
		app.mount("#app");
	</script>
</html>
